{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}专利列表{% endblock %}
{% block custom_css %}
    <link rel="stylesheet" href="{% static 'css/patent.css' %}">
{% endblock %}
{% block custom_bread %}
    <section class="container">
        <ul class="breadcrumb">
            <li><a href="#">首页</a></li>
            <li class="active">专利商品列表</li>
        </ul>
    </section>
{% endblock %}
{% block content %}
    {#筛选#}

    <section class="container">
        <div class="filter">
            {#筛选行业分类#}
            <div class="filter-box">
                <div class="filter-title"><span>行业分类</span></div>

                <ul class="filter-list">
                    <li class="filter-item {% ifequal field_category_id '' %}filter-active{% endifequal %}"
                        role="presentation">
                        <a role="menuitem" tabindex="-1"
                           href="?field_category=&patent_category={{ patent_category_id }}">
                            <span>全部</span></a>
                    </li>
                    {% for field_category_ in field_categorys %}
                        <li class="filter-item {% ifequal field_category_id field_category_.0 %}filter-active{% endifequal %}"
                            role="presentation">
                            <a role="menuitem" tabindex="-1"
                               href="?field_category={{ field_category_.0 }}&patent_category={{ patent_category_id }}">
                                <span>
                                    {{ field_category_.1 }}</span></a>
                        </li>
                    {% endfor %}

                </ul>
            </div>
            {#筛选专利分类#}
            <div class="filter-box-bottom">
                <div class="filter-title"><span>专利分类</span></div>
                <ul class="filter-list">
                    <li class="filter-item {% ifequal patent_category_id '' %}filter-active{% endifequal %}"
                        role="presentation">
                        <a role="menuitem" tabindex="-1"
                           href="?patent_category=&field_category={{ field_category_id }}">
                            <span>全部</span></a>
                    </li>
                    {% for patent_category_ in patent_categorys %}
                        <li class="filter-item {% ifequal patent_category_id patent_category_.0 %}filter-active{% endifequal %}"
                            role="presentation">
                            <a role="menuitem" tabindex="-1"
                               href="?patent_category={{ patent_category_.0 }}&field_category={{ field_category_id }}">
                                <span>
                                    {{ patent_category_.1 }}</span></a>
                        </li>
                    {% endfor %}

                </ul>
            </div>
        </div>
    </section>
    {#        <div>#}
    {#            <p>共{{ patent_nums }}个专利</p>#}
    {#        </div>#}

    {#内容#}
    <section class="container">
        <div class="row">
            <div class="module col-md-9">
                <div class="module-list">
                    {% for patent in all_patent.object_list %}
                        <div class="module-item-box ">
                            <div class="module-item-img-box">
                                <img class="module-item-img" src="{{ MEDIA_URL }}{{ patent.main_pic }}"/>
                            </div>
                            <div class="module-item-text">
                                <p class="title"><a href="/patent/detail/{{ patent.id }}/">{{ patent.name }}</a></p>
                                <p class="content">
                                    专利(申请号):{{ patent.patent_id }}/{{ patent.get_patent_category_display }}</p>
                                <p class="content">行业:{{ patent.get_field_category_display }}</p>
                                <p class="content">价格:<span class="price">{{ patent.price }}</span>元 </p>
                            </div>
                            <div class="module-item-btn-box">
                                {% if patent.has_fav %}
                                    <span id="{{ patent.id }}" class="module-item-btn-faved fav">取消收藏</span>
                                {% else %}
                                    <span id="{{ patent.id }}" class="module-item-btn fav">收藏</span>
                                {% endif %}
                                <span class="module-item-btn" data-toggle="modal" data-target="#myModal">咨询</span>
                            </div>


                        </div>
                    {% endfor %}
                </div>



                <!-- 模态框（Modal） -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">
                                    请扫描二维码
                                </h4>
                            </div>
                            <div class="modal-body">
                                <img src="{% static 'img/qr.jpg' %}"/>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                </button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>

                {#分页#}
                <nav class="page-position">
                    <ul class="pagination">
                        {% if all_patent.has_previous %}
                            <li>
                                <a href="?field_category={{ field_category_id }}&patent_category={{ patent_category_id }}&page={{ all_patent.previous_page_number }}"
                                   class="prev">&lsaquo;&lsaquo; </a></li>
                        {% else %}
                            <li><span class="disabled prev">&lsaquo;&lsaquo; </span></li>
                        {% endif %}
                        {% for page in all_patent.pages %}
                            {% if page %}
                                {% ifequal page all_patent.number %}
                                    <li><span class="current page">{{ page }}</span></li>
                                {% else %}
                                    <li>
                                        <a href="?field_category={{ field_category_id }}&patent_category={{ patent_category_id }}&page={{ page }}"
                                           class="page">{{ page }}</a>
                                    </li>
                                {% endifequal %}
                            {% else %}
                                <li class="disabled"><span>...</span></li>
                            {% endif %}
                        {% endfor %}
                        {% if all_patent.has_next %}
                            <li>
                                <a href="?field_category={{ field_category_id }}&patent_category={{ patent_category_id }}&page={{ all_patent.next_page_number }}"
                                   class="next">
                                    &rsaquo;&rsaquo;</a></li>
                        {% else %}
                            <li><span class="disabled next"> &rsaquo;&rsaquo;</span></li>
                        {% endif %}
                    </ul>
                </nav>
            </div>

            <div class="col-md-3">
                <div class="rank-box">
                    <div class="rank-title"></div>

                    <div class="rank-list">

                        {% for patent in newest_patent %}
                            <div class="rank-item">
                                <a href="/patent/detail/{{ patent.id }}/">{{ patent.name }}</a>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="publish-patent"></div>

                <div class="publish-project"></div>
            </div>
        </div>
    </section>
{% endblock %}
{% block custom_js %}
    <script type="text/javascript">
        //收藏分享
        function add_fav(current_elem, fav_id, fav_type) {
            $.ajax({
                cache: false,
                type: "POST",
                url: "{% url "operation:add_fav" %}",
                data: {'fav_id': fav_id, 'fav_type': fav_type},
                async: true,
                beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success: function (data) {
                    if (data.status == 'fail') {
                        if (data.msg == '用户未登录') {
                            window.location.href = "{% url 'login' %}?next={{ request.path }}";
                        } else {
                            alert(data.msg)
                        }

                    } else if (data.status == 'success') {
                        if (data.msg === '收藏') {
                            current_elem.addClass('module-item-btn')
                            current_elem.removeClass('module-item-btn-faved')
                            current_elem.text(data.msg)
                        } else {
                            current_elem.addClass('module-item-btn-faved')
                            current_elem.removeClass('module-item-btn')
                            current_elem.text(data.msg)
                        }
                    }
                },
            });
        }

        $('.fav').on('click', function () {
            add_fav($(this), $(this).attr('id'), 1);
        });


    </script>
{% endblock %}